<template>
	<view v-if="banners.length>0">
		<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="endplay()" :circular='true' v-bind:style="{ height: height + 'px' }">
			<block v-for="banner in banners" :key="banner.id">
				<swiper-item>
					<block v-if="banner.mediaType==2">
						<video class="zzh-media-item" :src="banner.imageUrl" :initial-time="1" :autoplay="autoplay" @pause="endplay()" @ended="endplay()" @play="beginplay()"></video>
					</block>
					<block class="zzh-media-item" v-else>
						<image class="zzh-media-item" :src="banner.imageUrl" @click="goPage(banner.link)"></image>
					</block>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
    export default {
		data() {
			return {
				autoplay: false
			}
		},
		props: {
			banners:{
				type:Array,
				default:function(){
					return []
				}
			},
			height: {
				type:Number,
				default:150
			},
			indicatorDots:{
				type:Boolean,
				default:false
			},
			isAutoplay:{
				type:Boolean,
				default:true
			},
			interval:{
				type:Number,
				default:5000
			},
			duration:{
				type:Number,
				default:500
			},
		},
		mounted(){
			this.autoplay = this.isAutoplay ;
		},
		methods:{
			//视频开始播放事件（停止自动轮播）
			beginplay(){
				this.autoplay=false;
			},
			//视频停止播放事件（开始自动轮播）
			endplay(){
				this.autoplay=true;
			},
			//页面跳转
			goPage(url){
				if(!url){return}
				console.log("页面跳转",url)
				uni.navigateTo({
					url: url
				});
			}
		}
    }
</script>

<style>
	.zzh-media-item{
		width:100%;
		height:100%;
	}
</style>
